<!-- 封装时间选择组件 -->
<template>
  <div>
    <div>
      <van-field
        v-model="value"
        @click="selectShow = true"
        right-icon="arrow"
        readonly
        placeholder="请选择"
       
      >
      <template slot="right-icon" v-if="timeValue&&supportClear">
          <img src="~@/assets/img/filedClear.png" alt="" @click.stop='clickClose' class="filedClear">
      </template>
      </van-field>
      <van-popup v-model="selectShow" confirm="confirm" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          :type="type"
          :title="title"
          :formatter="formatter"
          @confirm="confirmTime"
          @cancel="selectShow = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "dateTime",
  props: {
    title: {
      type: String,
      default: "", //标题
    },
    type: {
      type: String,
      default: "datetime", //时间类型，
    },
    value: {
      type: String,
      default: "",
    },
    supportClear: {
      type: Boolean,
      default: false,
    },
  },
  computed: {},
  data() {
    return {
      currentDate: new Date(),
      selectShow: false,
      timeValue: "",
    };
  },
  methods: {
    clickClose(e) {
     this.timeValue = "";
     this.$emit("confirmTime", "");
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },
    confirmTime() {
      if (this.type === "date") {
        this.timeValue = moment(this.currentDate).format("YYYY-MM-DD");
      } else {
        this.timeValue = moment(this.currentDate).format("YYYY-MM-DD HH:mm");
      }

      this.selectShow = false;
      this.$emit("confirmTime", this.timeValue);
    },
  },
  watch: {
    value() {
      this.timeValue = this.value;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
